@media screen and (max-width: 767px) {

    .match-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px;
    }

    .team-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 1;
    }

    .team-container {
        flex-direction: column;
        gap: 4px;
    }

    .team-logo {
        width: 28px;
        height: 28px;
    }

    .team-score {
        font-size: 20px;
    }

    .match-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
    }
}